<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">进厂补贴新增</block>
			<block slot="right">
				<button class="cu-btn bg-blue shadow" @click="save">保存</button>
			</block>
		</cu-custom>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles " style="color: #1E5EFF;"></text> 基础信息填写
			</view>
		</view>

		<view style="margin-top: 10px;">
			<view style="padding: 10px;">

				<view class="cu-form-group" style="background: #FAFAFA;">
					<view class="title">领取人姓名</view>
					<!-- <my-select range-key="text" @change="userIdChange" value-key="value"
						dict-code="sys_user,realname,id" v-model="dataObj.userId" /> -->
					<my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id"
						v-model="userId" />
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">领取人性别</view>
					<input disabled name="input" v-model="dataObj.receiverSex_dictText"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">领取人年龄</view>
					<input disabled name="input" v-model="dataObj.receiverAge"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">公司</view>
					<input disabled name="input" v-model="dataObj.company_dictText"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">领取人工号</view>
					<input disabled name="input" v-model="dataObj.receiverWorkNo"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">领取人身份证</view>
					<input disabled name="input" v-model="dataObj.receiverIdCard"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">领取人职务</view>
					<input disabled name="input" v-model="dataObj.departIds_dictText"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;border-radius:  0px 0px 10px 10px;">
					<view class="title">领取人手机号</view>
					<input disabled name="input" v-model="dataObj.receiverPhone"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">补贴金额</view>
					<input name="input" type="number" v-model="dataObj.introductionFee"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">被介绍熟练程度</view>
					<input disabled name="input" v-model="dataObj.proficiency_dictText"></input>
				</view>
				<view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">进厂日期</view>
					<input disabled name="input" v-model="dataObj.enterFactoryTime"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;">
					<view class="title">介绍人姓名</view>
					<!-- <my-select range-key="text" @change="userIdChange" value-key="value"
						dict-code="sys_user,realname,id" v-model="dataObj.userId" /> -->
					<my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id"
						v-model="userId2" />
				</view>

				<!-- <view class="cu-form-group" style="background: #E2E2E2;">
					<view class="title">被介绍人入职时间</view>
					<input disabled name="input" v-model="dataObj2.introductionEmploymentTime"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;">
					<view class="title">被介绍人身份证号</view>
					<input disabled name="input" v-model="dataObj2.introductionIdCard"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">被介绍人年龄</view>
					<input disabled name="input" v-model="dataObj2.introductionAge"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">被介绍人性别</view>
					<input disabled name="input" v-model="dataObj2.introductionSex"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">被介绍人职务</view>
					<input disabled name="input" v-model="dataObj2.departIds_dictText"></input>
				</view>
				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">被介绍人手机号</view>
					<input disabled name="input" v-model="dataObj2.introductionPhone"></input>
				</view> -->

				<!-- <view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">进场性质</view>
					<input disabled name="input" v-model="dataObj2.identityCategory_dictText"></input>
				</view> -->

				<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">与被介绍人关系</view>
					<my-select range-key="text" value-key="value" dict-code="family_relationship"
						v-model="dataObj.relationship" />
					<!-- <input name="input" v-model="dataObj.relationship"></input> -->
				</view>
				<!-- <view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
					<view class="title">发放月份</view>
					<input name="input" v-model="dataObj.distributionTime"></input>
				</view> -->
				<view class="cu-form-group">
					<view class="title">发放月份</view>
					<picker mode="date" fields="month" :value="dataObj.distributionTime"
						@change="DateChangeGraduationTime">
						<view class="picker">
							{{distributionTime}}
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				distributionTime: moment().format('YYYY-MM-DD'),
				id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
				dataObj: {},
				dataObj2: {},
				userId: '',
				editId: '',
				selPayTimeIndex: 0,
				selSubsidyTimeIndex: 0,
				entryFactorySubsidiesObj: []
			}
		},
		watch: {
			userId: {
				immediate: true,
				handler(val, old) {
					console.log("dataObject.userId值变化")
					console.log(val)
					console.log(old)
					this.userId = val;
					this.queryUserByUserId()

				},
			},
			userId2: {
				immediate: true,
				handler(val, old) {
					console.log("dataObject2.userId值变化")
					console.log(val)
					console.log(old)
					this.userId2 = val;
					if (this.userId2 != '') {
						this.queryUserByUserId2()
					}
				},
			},
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			DateChangeGraduationTime(e) {
				this.distributionTime = e.detail.value
				this.dataObj.distributionTime = e.detail.value + "-01"
				console.log("this.dataObj.distributionTime==" + this.dataObj.distributionTime)
			},
			queryUserByUserId() {
				this.$http.get('/crm_user/crmUser/queryById', {
					params: {
						id: this.userId
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						this.dataObj = res.data.result
						this.dataObj.receiverIdCard = res.data.result.idCard
						this.dataObj.receiverWorkNo = res.data.result.workNo
						this.dataObj.receiverDepartIds = res.data.result.departIds
						this.dataObj.departIds_dictText = res.data.result.departIds_dictText
						this.dataObj.receiverSex = res.data.result.sex
						this.dataObj.receiverSex_dictText = res.data.result.sex_dictText
						this.dataObj.receiverPhone = res.data.result.phone
						this.userId = res.data.result.id
						this.dataObj.receiver = res.data.result.id
						this.dataObj.realname = res.data.result.realname
						this.dataObj.company_dictText = res.data.result.company_dictText
						this.dataObj.company = res.data.result.company
						this.dataObj.receiverAge = res.data.result.age
						this.dataObj.proficiency_dictText = res.data.result.proficiency_dictText
						this.dataObj.proficiency = res.data.result.proficiency
						this.dataObj.enterFactoryTime = res.data.result.enterFactoryTime
					}
				}).catch(err => {
					console.log(err);
				});
			},
			queryUserByUserId2() {
				this.$http.get('/crm_user/crmUser/queryById', {
					params: {
						id: this.userId2
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						this.dataObj2 = res.data.result
						this.dataObj2.introductionEmploymentTime = res.data.result.enterFactoryTime
						this.dataObj2.introductionIdCard = res.data.result.idCard
						this.dataObj2.introductionAge = res.data.result.age
						this.dataObj2.introductionSex = res.data.result.sex_dictText
						this.dataObj2.sex = res.data.result.sex
						this.dataObj2.introductionPost = res.data.result.departIds
						this.dataObj2.departIds_dictText = res.data.result.departIds_dictText
						this.dataObj2.introductionPhone = res.data.result.phone
						this.dataObj2.proficiencyLevel_dictText = res.data.result.proficiencyLevel_dictText
						this.dataObj2.proficiency = res.data.result.proficiency_dictText
						this.dataObj2.identityCategory = res.data.result.identityCategory
						this.dataObj2.identityCategory_dictText = res.data.result.identityCategory_dictText
						this.userId2 = res.data.result.id
						this.dataObj2.introduction = res.data.result.id
						this.dataObj2.realname = res.data.result.realname
					}
				}).catch(err => {
					console.log(err);
				});
			},
			addObj() {
				this.entryFactorySubsidiesObj.push({
					subsidyTime: '',
					subsidy: '',
					realSubsidy: '',
					payTime: '',
					subsidyStatus: '',
					illustrate: '',
				})
			},
			deleteObj(index) {
				this.entryFactorySubsidiesObj.splice(index, 1);
			},
			payTimeDateChange(e) {
				this.entryFactorySubsidiesObj[this.selPayTimeIndex].payTime = e.detail.value
			},
			payTimeClick(index) {
				this.selPayTimeIndex = index
			},
			subsidyTimeDateChange(e) {
				this.entryFactorySubsidiesObj[this.selSubsidyTimeIndex].subsidyTime = e.detail.value
			},
			subsidyTimeClick(index) {
				this.selSubsidyTimeIndex = index
			},
			save() {
				this.$http.post('/crm_entry_factory_subsidies/crmEntryFactorySubsidies/add', {
						//"entryFactorySubsidiesSecs": this.entryFactorySubsidiesObj,
						"id": this.id,
						"approvalStatus": 1,
						"company": this.dataObj.company,
						"distributionTime": this.dataObj.distributionTime,
						"enterFactoryTime": this.dataObj.enterFactoryTime,
						"introductionRealname": this.dataObj2.realname,
						"introductionUserId": this.dataObj2.introduction,
						"proficiency": this.dataObj.proficiency,
						"receiverAge": this.dataObj.receiverAge,
						"receiverDepartIds": this.dataObj2.introductionPost,
						"receiverIdCard": this.dataObj.receiverIdCard,
						"receiverPhone": this.dataObj.receiverPhone,
						"receiverRealname": this.dataObj.realname,
						"receiverSex": this.dataObj.receiverSex,
						"receiverUserId": this.dataObj.receiver,
						"receiverWorkNo": this.dataObj.receiverWorkNo,
						"relationship": this.dataObj.relationship,
						"subsidy": this.dataObj.introductionFee,

					})
					.then(res => {
						if (res.data.success) {
							uni.navigateTo({
								url: '/pages/entryFactorySubsidies/index'
							})
						} else {
							this.$tip.toast(res.data.message)
						}
					}).catch(() => {
						this.$tip.loaded();
						this.$tip.toast('提交失败')
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.blackList {
		height: 100%;
		overflow: hidden;
	}

	.page-search {
		padding-left: 34rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		width: 680rpx;
		height: 86rpx;
		background-color: rgba(249, 249, 249, 1);
		border-radius: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;

		.search-left {
			width: 28rpx;
			height: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search-center {
			margin-left: 22rpx;
		}

		.search-placeholder {
			font-size: 28rpx;
			font-weight: 400;
			color: #7C7C7C;
		}


	}

	.filter-btn {
		width: 40rpx;
		height: 40rpx;
		margin-right: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page-content-main {
		height: calc(100% - 12rpx - 86rpx);
		border-top-left-radius: 64rpx;
		border-top-right-radius: 64rpx;
		padding: 26rpx 34rpx 0 34rpx
	}

	.select-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

	}

	.select {
		width: 160rpx;
		height: 74rpx;
		border-radius: 60rpx;
		background-color: #4591FE;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
		position: relative;

		.select-value {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 18rpx;
		}

		.select-icon {
			width: 22rpx;
			height: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 20rpx;
			top: 25rpx;
		}
	}

	.list {
		height: calc(100% - 74rpx - 20rpx);
	}

	.list-item {
		border-radius: 28rpx;
		background-color: #FFFFFF;
		padding: 26rpx 24rpx 28rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 26rpx;
		position: relative;

		.list-item-leftCenter {
			display: flex;
			flex-direction: row;
		}

		.list-item-left {
			width: 86rpx;
			height: 86rpx;
			margin-right: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.list-item-center {
			.list-item-row {
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;

				.list-item-name {
					color: #101317;
					font-size: 32rpx;
					margin-right: 16rpx;
				}

				.list-item-sex {
					width: 106rpx;
					height: 42rpx;
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
					border-bottom-left-radius: 20rpx;
					background-color: rgba(234, 171, 78, 0.35);
					line-height: 42rpx;
					text-align: center;
					color: rgba(255, 173, 4, 1);
					font-size: 24rpx;
				}

				.list-item-row-icon {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.list-item-row-title,
				.list-item-row-value {
					font-size: 24rpx;
					font-weight: 400;
					color: #101317;
					line-height: 38rpx;
				}

			}
		}

		.list-item-btn {
			width: 36rpx;
			height: 36rpx;
			margin-top: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.list-item-tab {
			width: 132rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			background-color: rgba(69, 145, 254, 0.4);
			position: absolute;
			top: 0;
			right: 0;
			border-top-right-radius: 26rpx;
			border-bottom-left-radius: 20rpx;
		}

		.list-item-tab-text {
			font-size: 26rpx;
			color: rgba(69, 145, 254, 1)
		}
	}

	.nav-right-image {
		width: 80rpx;
		height: 80rpx;
		margin-left: 15px;
	}

	.cu-form-group {
		background-color: #ffffff;
		line-height: 15px;
		padding: 0.5px 15px;
		display: flex;
		align-items: center;
		min-height: 42px;
		justify-content: space-between;
	}

	::v-deep {
		.cu-form-group uni-picker .picker {
			line-height: 15px;
			font-size: 15px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-align: right;
		}

		.cu-form-group uni-picker::after {
			font-family: cuIcon;
			line-height: 15px;
			display: block;
			content: "\e6a3";
			position: absolute;
			font-size: 17px;
			color: #8799a3;
			width: 31px;
			text-align: center;
			top: 0;
			bottom: 0;
			right: -10px;
			margin: auto;
		}
	}

	.textView {
		margin-left: 25px;
		font-size: 10px;
		margin-top: 5px;
	}

	.listText {
		width: 148rpx;
		height: 24rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 24rpx;
	}
</style>
